Skip to content

[Feature] 정산 상세 화면 UI 리뉴얼 및 바텀 시트 적용#54

Merged
Peter1119 merged 6 commits intomainfrom
feature/settlement_detail_design
Dec 12, 2025
Merged

[Feature] 정산 상세 화면 UI 리뉴얼 및 바텀 시트 적용#54
Peter1119 merged 6 commits intomainfrom
feature/settlement_detail_design

Conversation

@Peter1119
Copy link
Contributor

🔗 관련 이슈

  • 관련 이슈: #

✨ 작업 내용

  • 정산 상세 화면 (SettlementDetail) UI 전면 개편
    • 기존 네비게이션 푸시 방식에서 바텀 시트(Modal Sheet) 스타일로 레이아웃 변경
    • 날짜별/섹션별 헤더 컴포넌트 추가 (DateHeaderRow, SectionHeaderRow)
    • 멤버별 상세 카드 및 지출 내역(ExpenseRow) 디자인 고도화
  • 정산 결과 화면 (SettlementResult) 개선
    • '멤버별 정산 상세보기' 버튼을 하단 텍스트 버튼으로 변경하여 가시성 확보
    • 상세 화면 진입 시 불필요한 NavigationView 중복 래핑 제거
  • 디자인 리소스 업데이트
    • 프로필 이미지 에셋 변경 (PDF → SVG) 및 렌더링 스타일 수정 (foregroundStyle 제거 및 원본 색상 사용)

📸 Showcase

변경 전 변경 후
(기존 상세 화면) (새로운 바텀 시트 상세 화면)

📌 이미지가 없다면 이 섹션은 생략해도 됩니다.


📝 참고 사항

  • 상세 화면은 이제 SettlementResultView에서 .sheet로 띄워집니다.
  • ExpenseBreakdownSection 컴포넌트는 더 이상 사용하지 않아 제거되었습니다.

Motivation 🥳 (코드를 추가/변경하게 된 이유)

  • 정산 결과를 확인한 후, 상세 내역을 가볍게 조회하고 닫을 수 있도록 바텀 시트 UX를 도입했습니다.
  • 기존의 단순한 리스트 형태에서 벗어나, 날짜별/멤버별로 정보를 더 명확하게 전달하기 위해 UI를 개선했습니다.

Key Changes 🔥 (주요 구현/변경 사항)

  • SettlementDetailView: NavigationView 의존성을 제거하고 커스텀 헤더와 핸들바(Capsule)를 적용했습니다.
  • Assets: profile.pdf를 제거하고 벡터 기반의 profile.svg를 추가하여 리소스 효율성을 높였습니다.
  • Components: MemberDetailCard 내의 잔액 표시 색상을 디자인 시스템 토큰(Color.error, Color.primary500)에 맞게 수정했습니다.

To Reviewers 🙏 (리뷰어에게 전달하고 싶은 말)

  • 바텀 시트의 드래그 제스처나 스크롤 동작이 자연스러운지 확인 부탁드립니다.
  • 변경된 프로필 이미지가 다른 화면(참여자 선택 등)에서도 정상적으로 나오는지 크로스 체크 부탁드립니다.

Reference 🔗

Close Issues 🔒 (닫을 Issue)

Close #No.

Checklist

  • 브랜치를 가져와 작업한 경우 이전 브랜치에 PR을 보냈는지 확인
  • 빌드를 위해 SceneDelegate 수정한 것 PR로 올리지 않았는지 확인
  • 필요없는 주석, 프린트문 제거했는지 확인
  • 컨벤션 지켰는지 확인
  • final, private 제대로 넣었는지 확인
  • 다양한 디바이스에 레이아웃이 대응되는지 확인
    • iPhone SE
    • iPhone 13
    • iPhone 13 Pro Max

- 날짜 및 섹션 헤더 컴포넌트 추가
- 멤버 상세 카드 및 지출 행 디자인 개선
- 사용하지 않는 컴포넌트 제거
- 시스템 네비게이션 바 제거 및 커스텀 헤더 구현
- 스크롤 영역 및 패딩 조정
- 기존 버튼 스타일에서 텍스트 버튼으로 변경 및 하단 배치
- 정산 상세 모달 호출 시 불필요한 NavigationView 래핑 제거
@Peter1119 Peter1119 self-assigned this Dec 12, 2025
Copy link
Contributor

@Roy-wonji Roy-wonji left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Peter1119 수고 하셨습니다

return .primary500
} else if detail.netBalance < 0 {
return .red
return Color.error
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.error 로 해도 되지 않을까요 ?

Copy link
Contributor

@minneee minneee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다~

@Peter1119 Peter1119 merged commit 5acabf5 into main Dec 12, 2025
1 check passed
@Peter1119 Peter1119 deleted the feature/settlement_detail_design branch December 12, 2025 04:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants